<template>
  <div class="content">
    <mid-dialog title="添加" @close="closeAdd" >
      <div class="addapp" v-if="success === false">
        <table>
          <tr>
            <td><span class="c-error">*</span>姓名</td>
            <td>
              <input
                type="text"
                class="searchInput"
                placeholder="请输入姓名"
                v-model="adminName"
                v-bind:class="{ error: adminNameMsg }"
              />
              <div class="msg c-error">{{ adminNameMsg }}</div>
            </td>
          </tr>
          <tr>
            <td><span class="c-error">*</span>邮箱号码</td>
            <td>
              <input
                type="text"
                class="searchInput"
                placeholder="请输入邮箱号码"
                v-model="adminEmail"
                v-bind:class="{ error: adminEmailMsg }"
              />
              <div class="msg c-error">{{ adminEmailMsg }}</div>
            </td>
          </tr>
          <tr>
            <td><span class="c-error">*</span>职位设置</td>
            <td>
              <div class="type">
                <input
                  @focus="imgflag = false"
                  @blur="blur"
                  class="searchInput select"
                  type="text"
                  placeholder="请输入服务器类型"
                  v-model="adminRole"
                />
                <div @click="imgflag = !imgflag" class="pic">
                  <img :src="imgurl" alt="" />
                </div>
                <ul v-show="imgflag === false" class="options">
                  <li
                    v-for="(item, index) in options"
                    :key="index"
                    @click="setting(item.roleName)"
                  >
                    {{ item.roleName }}
                  </li>
                </ul>
              </div>
            </td>
          </tr>
        </table>

        <div class="btns flex-start">
          <div class="btn-white2" @click="quxiao">取消</div>
          <div class="btn-blue2" @click="add">确认</div>
        </div>
      </div>

      <div class="success flex-start" v-else>
        <div class="pic"></div>
        <div class="text">添加成功</div>
        <div class="btn-blue2" @click="confirm">确认</div>
      </div>
    </mid-dialog>
  </div>
</template>

<script>
import imgSrc1 from '@/assets/dropDown.png'
import imgSrc2 from '@/assets/pullUp.png'
export default {
  props: {
    state: {
      default: 0
    }
  },
  data () {
    return {
      adminRole: '',
      imgflag: true,
      options: ['管理员', 'xxx', 'yyy'],
      adminNameMsg: '',
      adminEmailMsg: '',
      adminName: '',
      adminEmail: '',
      success: false
    }
  },
  created () {
    this.$store.dispatch('systemManage/getRolelistData').then((res) => {
      this.options = res.data
    }).catch(res => {
      this.$message({
        type: 'error',
        message: res,
        duration: 1000
      })
    })
  },
  computed: {
    imgurl () {
      if (this.imgflag === true) {
        return imgSrc1
      } else {
        return imgSrc2
      }
    },
    validate () {
      return this.adminRole && this.adminName && this.adminEmail
    }
  },
  methods: {
    setting (val) {
      this.adminRole = val
      this.imgflag = true
    },
    closeAdd () {
      this.$emit('close')
    },
    blur () {
      setTimeout(() => {
        this.imgflag = true
      }, 200)
    },
    add () {
      if (this.validate) {
        this.adminNameMsg = ''
        this.adminEmailMsg = ''
        this.$store
          .dispatch('systemManage/addAdminData', {
            adminName: this.adminName,
            adminRole: this.adminRole,
            adminEmail: this.adminEmail
          })
          .then((res) => {
            // console.log(res)
            this.success = true
          })
          .catch((res) => {
            // console.log(res)
            if (res.data) {
              const Msgs = res.data.split(',') // 错误信息
              Msgs.pop()
              // console.log(Msgs)
              Msgs.map((item) => {
                if (item.indexOf('姓') !== -1) {
                  this.adminNameMsg = item
                } else if (item.indexOf('邮') !== -1) {
                  this.adminEmailMsg = item
                } else {
                  this.adminNameMsg = ''
                  this.adminEmailMsg = ''
                }
              })
            } else {
              this.$message({
                type: 'error',
                message: res.message,
                duration: 1000
              })
            }
          })
      } else {
        this.$message({
          type: 'error',
          message: '请填写必选项',
          duration: 1000
        })
      }
    },
    confirm () {
      this.$emit('close')
      this.getinfo()
    },
    quxiao () {
      this.$emit('close')
    },
    // 更新完更新页面的信息
    getinfo () {
      switch (this.state) {
        case 0:
          this.$store.dispatch('systemManage/getAllAdminData').then(res => {
          })
          break
        case 1:
          this.$store.dispatch('systemManage/getRegisteredData')
          break
        case 2:
          this.$store.dispatch('systemManage/getUnRegisterData')
          break
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.addapp {
  text-align: center;
  table {
    position: absolute;
    z-index: 100;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    td {
      &:nth-child(1) {
        height: 0px;
        white-space: nowrap;
        text-align: right;
        line-height: 40px !important;
        vertical-align: top;
      }
      &:nth-child(2) {
        width: 300px;
        height: 0px;

        padding-left: 20px;
        text-align: left;
      }
    }
  }
  .msg {
    margin: 8px 0;
    height: 20px;
  }
  .btns {
    position: absolute;
    bottom: 20px;
    .btn-white2 {
      width: 100px;
      margin-left: 156px;
      margin-right: 20px;
    }
    .btn-blue2 {
      width: 100px;
    }
  }
}
.success{
  flex-direction:column;
  .pic{
    height: 91px;
    width: 91px;
    border: 1px solid #ccc;
    margin-top: 118px;
  }
  .text{
    margin-top: 20px;
  }
  .btn-blue2 {
      width: 100px;
      margin-top: 100px;
    }

}
</style>
